<script setup lang="ts">
import { storeToRefs } from 'pinia';

import { addressStore } from '#/store';

const address = addressStore();
const { add4AreaList, getInterOuter, formStateA } = storeToRefs(address);

const labelCol = { style: { width: '100px' } };
const wrapperCol = { span: 24 };

const fieldNames = {
  label: 'name',
  value: 'code',
  children: 'children',
};
</script>

<template>
  <div>
    <a-form :label-col="labelCol" :model="formStateA" :wrapper-col="wrapperCol">
      <a-form-item
        :rules="[{ required: true, message: '请输入收件人' }]"
        label="收件人"
        name="receiveName"
      >
        <a-input
          v-model:value="formStateA.receiveName"
          placeholder="请输入收件人"
          style="width: 200px"
        />
      </a-form-item>
      <a-form-item
        :rules="[{ required: true, message: '请输入退货电话' }]"
        label="退货电话"
        name="receivePhone"
      >
        <a-input
          v-model:value="formStateA.receivePhone"
          placeholder="请输入退货电话"
          style="width: 200px"
        />
      </a-form-item>
      <a-form-item
        :rules="[{ required: true, message: 'Please input your username!' }]"
        label="退货地址"
      >
        <a-space direction="vertical">
          <a-cascader
            v-model:value="getInterOuter"
            :field-names="fieldNames"
            :load-data="address.loadData"
            :options="add4AreaList"
            change-on-select
            placeholder="请选择地址"
          />
          <a-textarea
            v-model:value="formStateA.addressDetail"
            :rows="4"
            placeholder="详细地址"
            style="width: 400px"
          />
        </a-space>
      </a-form-item>
      <a-form-item label="备注">
        <a-input
          v-model:value="formStateA.remark"
          placeholder="请输入备注"
          style="width: 200px"
        />
      </a-form-item>
    </a-form>
  </div>
</template>
